<template>
  <el-dialog
    :model-value="open"
    :close-on-click-modal="false"
    :title="title"
    :before-close="handleClose"
  >
    <el-tabs v-model="activeNames" @tab-click="handleClick">
      <el-tab-pane label="基础数据" name="first">
        <el-row v-if="!isAdd">
          <el-col :span="1.5" class="top-right-btn">
            <el-button :loading="subBtn" type="primary" @click="submitForm">
              保存
            </el-button>
          </el-col>
        </el-row>
        <el-form
          ref="editForm"
          inline
          :rules="rules"
          class="queryParams"
          :model="form"
          label-width="150px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="产品代码"
                prop="salesProductCode"
                :label-position="labelPosition"
              >
                <el-input
                  v-model="form.salesProductCode"
                  placeholder="请输入销售产品代码"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="产品中文名"
                prop="salesProductName"
                :label-position="labelPosition"
              >
                <el-input
                  v-model="form.salesProductName"
                  placeholder="请输入销售产品中文名"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="产品英文名"
                prop="salesProductEname"
                :label-position="labelPosition"
              >
                <el-input
                  v-model="form.salesProductEname"
                  placeholder="请输入销售产品英文名"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="体积系数"
                prop="volunmFactor"
                :label-position="labelPosition"
              >
                <el-input-number
                  v-model="form.volunmFactor"
                  placeholder="请输入体积系数"
                  :controls="false"
                  clearable
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="材积系数"
                prop="volumeCoefficient"
                :label-position="labelPosition"
              >
                <el-input-number
                  v-model="form.volumeCoefficient"
                  placeholder="请输入材积系数"
                  :controls="false"
                  clearable
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="周长"
                prop="perimeter"
                :label-position="labelPosition"
              >
                <el-input-number
                  v-model="form.perimeter"
                  placeholder="请输入周长"
                  :controls="false"
                  clearable
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="单件重量"
                prop="unitWeight"
                :label-position="labelPosition"
              >
                <el-input-number
                  v-model="form.unitWeight"
                  placeholder="请输入单件重量"
                  :controls="false"
                  clearable
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="单件材积重量"
                prop="woodWeight"
                :label-position="labelPosition"
              >
                <el-input-number
                  v-model="form.woodWeight"
                  placeholder="请输入材积重量"
                  :controls="false"
                  clearable
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="起收重量"
                prop="totalWeight"
                :label-position="labelPosition"
              >
                <el-input-number
                  v-model="form.totalWeight"
                  placeholder="请输入起收重量"
                  :controls="false"
                  clearable
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="计重规则"
                prop="weightRules"
                :label-position="labelPosition"
              >
                <el-select
                  v-model="form.weightRules"
                  filterable
                  placeholder="请输入计重规则"
                  clearable
                >
                  <el-option
                    v-for="dict in dicts[DictDirection.计重规则]"
                    :key="dict.dictValue"
                    :value="dict.dictValue"
                    :label="dict.dictLabel"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="产品组"
                prop="productGroup"
                :label-position="labelPosition"
              >
                <el-select
                  v-model="form.productGroup"
                  filterable
                  placeholder="请选择产品组"
                  clearable
                >
                  <el-option
                    v-for="dict in dicts[DictDirection.产品分组]"
                    :key="dict.id"
                    :value="dict.groupName"
                    :label="dict.groupName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="产品分类"
                prop="productType"
                :label-position="labelPosition"
              >
                <el-select
                  v-model="form.productType"
                  filterable
                  placeholder="请选择产品分类"
                  clearable
                >
                  <el-option
                    v-for="dict in dicts[DictDirection.产品分类]"
                    :key="dict.classifyCode"
                    :value="dict.classifyCode"
                    :label="dict.classifyName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="产品类型"
                prop="productClassification"
                :label-position="labelPosition"
              >
                <el-select
                  v-model="form.productClassification"
                  filterable
                  placeholder="请选择产品类型"
                  clearable
                >
                  <el-option
                    v-for="dict in dicts[DictDirection.产品类型]"
                    :key="dict.dictValue"
                    :value="dict.dictValue"
                    :label="dict.dictLabel"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="运输类型"
                prop="transportType"
                :label-position="labelPosition"
              >
                <el-select
                  v-model="form.transportType"
                  filterable
                  placeholder="请选择运输类型"
                  clearable
                >
                  <el-option
                    v-for="dict in dicts[DictDirection.产品运输类型]"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="产品状态"
                prop="status"
                :label-position="labelPosition" 
              >
                <el-radio-group v-model="form.status" clearable>
                  <el-radio
                    v-for="dict in dicts[DictDirection.产品状态]"
                    :key="dict.dictValue"
                    :value="dict.dictValue"
                    :label="dict.dictValue"
                  >
                    {{ dict.dictLabel }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="是否录入邮编"
                prop="isEntryEmail"
                :label-position="labelPosition"
              >
                <el-radio-group v-model="form.isEntryEmail" clearable>
                  <el-radio
                    v-for="dict in dicts[DictDirection.录入邮编]"
                    :key="dict.dictValue"
                    :value="dict.dictValue"
                    :label="dict.dictValue"
                  >
                    {{ dict.dictLabel }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="是否补足单件"
                prop="isSingle"
                :label-position="labelPosition"
              >
                <el-radio-group v-model="form.isSingle">
                  <el-radio
                    v-for="item in makeSinge"
                    :key="item.label"
                    :value="item.value"
                    :label="item.label"
                  >
                    {{ item.value }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="是否补足101"
                prop="isMakeUp"
                :label-position="labelPosition"
              >
                <el-radio-group v-model="form.isMakeUp">
                  <el-radio
                    v-for="item in makeSinge"
                    :key="item.label"
                    :value="item.value"
                    :label="item.label"
                  >
                    {{ item.value }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item
                label="失效时间"
                prop="failureTime"
                :label-position="labelPosition"
              >
                <el-date-picker
                  v-model="form.failureTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  clearable
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane v-if="!isAdd" label="服务渠道" name="second">
        <service-channels v-if="productId!=null" :father-open="open" :product-id="productId" />
      </el-tab-pane>
      <el-tab-pane v-if="!isAdd" label="重量进位规则" name="third">
        <weight-rules v-if="productId!=null" :product-id="productId" :father-open="open" />
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <div>
        <el-button
          v-if="isAdd"
          type="primary"
          @click="submitForm"
        >
          确定
        </el-button>
        <el-button @click="cancel">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import {
  ref,
  getCurrentInstance,
  defineExpose,
  defineEmits,
  defineAsyncComponent,
  toRefs,
} from 'vue'
import { ElMessage } from 'element-plus'
import useDicts, { DictDirection } from '@/store/modules/dicts'
import {
  getProductList,
  addProduct,
  getProductDetail,
  updateProduct,
} from '@/api/BusinessConfig/promotingProducts'

const serviceChannels = defineAsyncComponent(
  () => import('./serviceChannels.vue'),
)
const weightRules = defineAsyncComponent(() => import('./weightRlues.vue')) 
const dicts = useDicts()
dicts.setDicts(DictDirection.计重规则)
dicts.setDicts(DictDirection.产品分类)
dicts.setDicts(DictDirection.产品类型)
dicts.setDicts(DictDirection.产品运输类型)
dicts.setDicts(DictDirection.录入邮编)
dicts.setDicts(DictDirection.产品状态)
dicts.setDicts(DictDirection.产品分组)
const props = defineProps({
  open: {
    type: Boolean,
  },
  title: {
    type: String,
    default: '',
  },
  isAdd: {
    type: Boolean,
  },
})
const emit = defineEmits(['changeList', 'update:title', 'update:isAdd', 'update:open'])
const labelPosition = ref('right')
const // 模态框显示
  channelOpen = ref(false),
  // 切换栏
  activeNames = ref('first'),
  // 基础数据加载
  subBtn = ref(false),
  // 标题
  title = ref('')
const makeSinge = [
    { value: '不补足', label: 0 },
    { value: '补足', label: 1 },
  ],
  // 新增-修改表单
  form = ref({
    id: undefined,
    isMakeUp: undefined,
    isSingle: undefined,
    salesProductCode: undefined,
    salesProductName: undefined,
    salesProductEname: undefined,
    volunmFactor: undefined,
    volumeCoefficient: undefined,
    perimeter: undefined,
    woodWeight: undefined,
    unitWeight: undefined,
    totalWeight: undefined,
    weightRules: undefined,
    productGroup: undefined,
    productType: undefined,
    transportType: undefined,
    status: undefined,
    isEntryEmail: undefined,
    statfailureTimeus: undefined,
    productClassification: undefined,
    failureTime: undefined,
  }),
  // 规则
  rules = {
    salesProductCode: [
      { required: true, message: '销售产品代码必填', trigger: 'blur' },
    ],
    salesProductName: [
      { required: true, message: '销售产品中文名必填', trigger: 'blur' },
    ],
    salesProductEname: [
      { required: true, message: '销售产品英文名必填', trigger: 'blur' },
    ],
    volumeCoefficient: [
      { required: true, message: '材积系数必填', trigger: 'blur' },
    ],
    volunmFactor: [
      { required: true, message: '体积系数必填', trigger: 'blur' },
    ],
    woodWeight: [
      { required: true, message: '单件材积重量必填', trigger: 'blur' },
    ],
    weightRules: [
      {
        required: true,
        message: '计重规则必须选择',
        trigger: ['blur', 'change'],
      },
    ],
    productGroup: [
      {
        required: true,
        message: '产品组必须选择',
        trigger: ['change', 'blur'],
      },
    ],
    productType: [
      {
        required: true,
        message: '产品类别必须选择',
        trigger: ['change', 'blur'],
      },
    ],
    unitWeight: [
      {
        required: true,
        message: '单件重量必填',
        trigger: ['change', 'blur'],
      },
    ],
    transportType: [
      {
        required: true,
        message: '运输类型必须选择',
        trigger: ['change', 'blur'],
      },
    ],
    status: [
      {
        required: true,
        message: '产品状态必须选择',
        trigger: ['change', 'blur'],
      },
    ],
    isEntryEmail: [
      {
        required: true,
        message: '是否录入邮编必须选择',
        trigger: ['change', 'blur'],
      },
    ],
    isSingle: [
      {
        required: true,
        message: '是否是否补足单件必须选择',
        trigger: ['change', 'blur'],
      },
    ],
    isMakeUp: [
      {
        required: true,
        message: '是否是否补足101必须选择',
        trigger: ['change', 'blur'],
      },
    ],
    failureTime: [
      {
        required: true,
        message: '失效时间必须选择',
        trigger: ['change', 'blur'],
      },
    ],
  },
  // 新增修改表单
  editForm = ref(null),
  {
    appContext: {
      config: {
        globalProperties: { $resetForm, $validateForm },
      },
    },
  } = getCurrentInstance()
// 重置表单
const reset = () => {
  form.value = {
    id: undefined,
    isMakeUp: 1,
    isSingle: 1,
    salesProductCode: undefined,
    salesProductName: undefined,
    salesProductEname: undefined,
    volunmFactor: undefined,
    volumeCoefficient: undefined,
    perimeter: undefined,
    woodWeight: undefined,
    unitWeight: undefined,
    totalWeight: undefined,
    weightRules: undefined,
    productGroup: undefined,
    productType: undefined,
    transportType: undefined,
    status: '0',
    isEntryEmail: undefined,
    statfailureTimeus: undefined,
    productClassification: undefined,
    failureTime: undefined,
  }
  $resetForm(editForm.value)
}
// 切换tab栏
const handleClick = (row: { [key: string]: any }) => {
  activeNames.value = row.paneName
}
// 确定新增-修改
const submitForm = () => {
  $validateForm(editForm.value, async () => {
    if (props.isAdd == true) {
      addProduct(form.value).then(res => {
        if (res.code == 200) {
          ElMessage.success('新增成功')
          emit('changeList')
          emit('update:open', false)
          reset()
        }
      })
    } else {
      updateProduct(form.value).then(res => {
        subBtn.value = true
        if (res.code == 200) {
          ElMessage.success('修改成功')
          emit('changeList')
          emit('update:open', false)
          reset()
          subBtn.value = false
        }
      })
    }
  })
}
// eslint-disable-next-line prefer-const
let productId = ref(null)
// 根据id查询修改的数据
const getList = (id) => {
  getProductDetail(id).then((res) => {
    form.value = res.data
    productId.value = res.data.id
    console.log(productId.value, '基础数据')
    emit('update:open', true)
  })
}

// 取消
const cancel = () => {
  activeNames.value = 'first'
  emit('update:open', false)
}
const handleClose = () => {
  reset()
  emit('update:isAdd', false)
  emit('update:open', false)
}
// console.log(toRefs(props))

defineExpose({
  channelOpen,
  getList,
})
</script>
